<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        #shops {
            margin-left: 36px;
            margin-top: 20px;
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
        }

        th {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }

        td {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }

        img {
            width: 60px;
            height: 50px;
        }

        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            border-top-color: inherit;
            border-right-color: inherit;
            border-bottom-color: inherit;
            border-left-color: inherit;
        }

        #table1 {
            border-spacing: 0;
            border-collapse: collapse;
            width: 1400px;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function loadData() {
            $.ajax({
                url: "product/queryAllProducts",
                data: {
                    userName: "${userName}",
                    order: "desc"
                },
                dataType: "json",
                success: function (data) {
                    $("#content").empty()
                    $.each(data, function (i, n) {
                        $("#content").append("<tr>")
                            .append("<td>" + n.id + "</td>")
                            .append("<td><img src='static/images/ex2.jpg' </td>")
                            .append("<td>" + n.content + "</td>")
                            .append("<td>" + n.category + "</td>")
                            .append("<td>￥" + n.oldPrice + "</td>")
                            .append("<td>￥" + n.price + "</td>")
                            .append("<td>" + n.nums + "</td>")
                            .append("<td>" + n.userName + "</td>")
                            .append("<td><a href='order/buy?id=" + n.id + "&userName="+n.userName+"' style='text-decoration: none; color: #FF5555'>" +
                                "<button style='padding: 3px 6px; background-color: deepskyblue; color: snow; " +
                                "cursor: pointer; font-weight: bold; font-size: 14px; border: 1px solid skyblue'>购买</button>" +
                                "</a></td>")
                            .append("</tr>")
                    })
                }
            })
        }
        function contact() {
            alert(this.id)
        }
        $(document).ready(function () {
            loadData()
            $("#btn").click(function () {
                var info = $("#info").val().trim()
                if (info == "") {
                    alert("请输入要查询的物品")
                } else {
                    $.ajax({
                        url: "product/likeQuery",
                        data: {
                            userName: "${userName}",
                            info: info
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data[0] == null) {
                                alert("搜索不到该物品")
                            } else {
                                $("#content").empty()
                                $.each(data, function (i, n) {
                                    $("#content").append("<tr>")
                                        .append("<td>" + n.id + "</td>")
                                        .append("<td><img src='static/images/ex2.jpg' </td>")
                                        .append("<td>" + n.content + "</td>")
                                        .append("<td>" + n.category + "</td>")
                                        .append("<td>￥" + n.oldPrice + "</td>")
                                        .append("<td>￥" + n.price + "</td>")
                                        .append("<td>" + n.nums + "</td>")
                                        .append("<td>" + n.userName + "</td>")
                                        .append("<td><a href='order/buy?id=" + n.id + "&userName="+n.userName+"' style='text-decoration: none; color: #FF5555'>" +
                                            "<button style='padding: 3px 6px; background-color: deepskyblue; color: snow; " +
                                            "cursor: pointer; font-weight: bold; font-size: 14px; border: 1px solid skyblue'>购买</button>" +
                                            "</a></td>")
                                        .append("</tr>")
                                })
                            }
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<div id="shops">
    <div>
        <h1 style="background-color: #5bc0de;" class="label">高校闲置物品交易平台</h1>
        <input type="text" id="info" style="width: 305px; height: 42px; margin-left: 275px;
                 border: 4px crimson solid; padding: 3px 6px"
        placeholder="盗墓笔记">
        <button id='btn' style='width: 110px; height: 40px; padding: 3px 6px; background-color: #C40000;
            border: 1px crimson solid; font-size: 20px; font-weight: bold; color: white;
            cursor: pointer;'>
            搜物品</button>
    </div>
    <br><br>
    <div>
        <table style="border: 1px solid #ddd;" id="table1">
            <thead style="background-color: #DFF0D8">
            <tr style="height: 30px">
                <th>ID</th>
                <th>图片</th>
                <th>物品内容</th>
                <th>物品类别</th>
                <th>原价格</th>
                <th>优惠价格</th>
                <th>库存数量</th>
                <th>卖家</th>
                <th colspan="2" align="center">操作</th>
            </tr>
            </thead>
            <tbody id="content">

            </tbody>
        </table>
    </div>
</div>
</body>
</html>
